<template>
    <div class="be-button"
         v-on="listeners"
         :class='`be-button__${size} be-button__${type}${borderStyle} ${customClass}`'
         :style="btnStyle">
<!--      <be-loading :show="loading"
                  :customRender="customRenderLoading"
                  :isBackground='false'
                  :round="round">
      </be-loading>-->
      <div class="be-button-body" style="margin: 0 auto;display: flex">
        <be-icon :icon="preIconStyle" v-if="preIcon"
                 :custom-class="`be-button-preIcon be-button-preIcon__${type}`">
        </be-icon>
        <button type="button"
                v-if="!isIcon"
                :id="`be_button_${this._uid}`"
                :style="btnStyles"
                :class='`be-button__inner ${disabledStyle}`'
                :disabled="disabled">
          <slot v-if="!loading"></slot>
          <slot></slot>
        </button>
        <be-icon :icon="nextIconStyle" v-if="nextIcon"
                 :custom-class="`be-button-nextIcon be-button-nextIcon__${type}`">
        </be-icon>
      </div>
    </div>

</template>

<script lang="ts">
import {computed, defineComponent, PropOptions} from "@vue/composition-api";

export default defineComponent({

  name: "BeButton",
  data(){
    return {
      btnStyles:{}
    }
  },
  props: {
    /**
     * 按钮大小
     * @values 'mini' | 'medium' | 'large'
     */
    size: {
      type: String,
      default: 'medium'
    },
    /**
     * 按钮圆角
     */
    round: {
      type: [Number, String],
      default: 2
    },
    /**
     * 定义情感颜色
     * @values 'default' | 'primary' | 'success' | 'info' | 'warning' | 'error'
     */
    type: {
      type: String,
      default: 'default'
    },
    /**
     * 开启图标按钮
     */
    isIcon: {
      type: Boolean,
      default: false
    },
    /**
     * 自定义样式类
     */
    customClass: {
      type: String,
      default: ''
    },
    /**
     * loading 按钮
     */
    loading: {
      type: Boolean,
      default: false
    },
    /**
     * 禁用
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * 边框
     */
    bordered: {
      type: Boolean,
      default: false
    },
    /**
     * 透明
     */
    ghost: {
      type: Boolean,
      default: false
    },
    /**
     * flex显示
     */
    flex: {
      type: Boolean,
      default: false
    },
    /**
     * 虚线
     */
    dashed: {
      type: Boolean,
      default: false
    },
    /**
     * 前置图标
     */
    preIcon: {
      type: String,
      default: ''
    },
    /**
     * 后置图标
     */
    nextIcon: {
      type: String,
      default: ''
    },
  },
  setup(props){
       const btnStyle =  computed(()=>{
            return {
                'background': props.ghost ? 'transparent !important' : '',
                'cursor': props.disabled ? "not-allowed" : "pointer",
                'border-style': props.dashed ? "dashed" : "solid",
                'border-radius': `${props.round}px`,
                'display': props.flex ? "flex" : "",
            }
        })
      const borderStyle =  computed(()=>{
          return props.bordered ? "__border" : ""
      })
      const disabledStyle =  computed(()=>{
          return props.disabled ? "be-button__inner__disabled" : ""
      })
      const preIconStyle =  computed(()=>{
          if(props.preIcon){
              if(props.loading){
                  return ''
              }else{
                  return props.preIcon
              }
          }else{
              return ''
          }
      })
      const nextIconStyle =  computed(()=>{
          if(props.nextIcon){
              if(props.loading){
                  return ''
              }else{
                  return props.nextIcon
              }
          }else{
              return ''
          }
      })
      const listeners =  computed(()=>{
          //return props.disabled ? null : this.$listeners
      })
     /* const customRenderLoading = () =>{
          return (<be-icon icon="refresh" spin color="#ffffff" ></be-icon>)
      }*/
      return {
           btnStyle,
          borderStyle,
          disabledStyle,
          preIconStyle,
          nextIconStyle,
          listeners,
         // customRenderLoading
      }
  },
  beforeUpdate() {
      /*if(this.loading){
        const button = document.getElementById(`be_button_${this._uid}`)
        this.btnStyles = {
          'width':Number(window.getComputedStyle(button).width.split('px')[0]) + 'px'
        }
      }else{
        this.btnStyles = ''
      }*/
  }

})
</script>

<style lang="scss">
@import 'src/assets/style/common-components/be-button';
</style>